<template>
    <div class="common-layout">
        <el-container>
        <!--头部部分--> 
        <el-header>
            <el-row justify="space-between" align="middle">
                <el-col :span="6">
                <div class="breadcrumb">
                    <el-icon><Fold /></el-icon>
                    <span>运营</span>
                </div>
                </el-col>
                <el-col :span="3">
                <div class="user-info">
                    <el-avatar :size="30" src="" />
                    <span class="username">admin</span>
                </div>
                </el-col>
            </el-row>
        </el-header>
        <el-header class="white"></el-header>
        <!--内容部分-->
        <el-main>
            <!--搜索栏部分-->
            <el-header class="search">
                <el-select
                    v-model="value"
                    :options="options"
                    :props="props"
                    placeholder="请选择活动"
                    style="width: 240px"
                />
                <el-input
                    class="searchInp"
                    v-model="input"
                    style="width: 240px"
                    placeholder="请输入姓名"
                    :prefix-icon="Search"
                />
                <el-button type="primary" class="searchBtn" @click="searchData">搜索</el-button>
            </el-header>
            <!--导出/刷新部分-->
            <el-header class="export-refresh">
                <el-button @click="exportToSvg">
                    <el-icon><Download /></el-icon>
                    导出
                </el-button>
                <el-button type="info" @click="handleRefresh">
                    <el-icon><Refresh /></el-icon>
                    刷新
                </el-button>
            </el-header>
            <!--表格-->
            <el-table :data="tableData" border style="width: 100%" class="dataTable">
                <el-table-column prop="orderNo" label="订单编号" width="16%" />
                <el-table-column prop="userId" label="姓名" width="9%" />
                <el-table-column prop="phone" label="手机号" width="10%"/>
                <el-table-column prop="idNumber" label="身份证号" width="12%" />
                <el-table-column prop="amount" label="支付金额/元" width="10%" />
                <el-table-column prop="paidAt" label="付款时间" width="10%"/>
                <el-table-column prop="activityName" label="活动名称" width="20%" />
                <el-table-column prop="status" label="状态" width="8%" />
            </el-table>
            <!--分页器-->
            <div class="demo-pagination-block">
                <el-pagination
                v-model:current-page="currentPage4"
                v-model:page-size="pageSize4"
                :page-sizes="[100, 200, 300, 400]"
                :size="size"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                />
            </div>

            
        </el-main>


        </el-container>
    </div>
</template>


<!--js-->
<script setup>
//下拉选择框
import { onMounted, ref } from 'vue'
import {
    getActiveList
    } from '@/components/api/ActiveOrder'
const value = ref('')//选项框内容
const props = {
  value: 'id',
  label: 'label',
  options: 'options',
  disabled: 'disabled',
}
//（请选择活动）选项
const options = [
  {
    id: 'Option1',
    label: '吃饭',
  },
]
//搜索输入框
import { Search } from '@element-plus/icons-vue'
const input = ref('')//输入框内容

// 刷新页面函数
const handleRefresh = () => {
  window.location.reload()
}

//表格数据
const tableData = ref([])
    let  getDrawalListFun = (searchParams = {}) => {
        const params ={
            name:searchParams.name || ''
        }
    getActiveList(params)
        .then(res => {
            if(res.code == 200){
                tableData.value = res.dataset
            }
        })
    }

//数据搜索函数
const searchData = () =>{
    getDrawalListFun({
        name: input.value.trim() 
    })
}
onMounted(()=>{
     getDrawalListFun()
})
// 导出为SVG的函数
const exportToSvg = () => {
  const svgWidth = 1000; 
  const svgHeight = 600;
  const margin = 20; 
  const rowHeight = 40; 
  const colWidths = [160, 90, 100, 120, 100, 100, 200, 80];

  // 2. 生成SVG内容字符串
  let svgContent = `<svg width="${svgWidth}" height="${svgHeight}" xmlns="http://www.w3.org/2000/svg">`;
  
  // 添加背景
  svgContent += `<rect width="100%" height="100%" fill="#fff"/>`;
  
  // 3. 生成表头
  let y = margin; 
  const headers = ['订单编号', '姓名', '手机号', '身份证号', '支付金额/元', '付款时间', '活动名称', '状态'];
  
  // 表头背景
  svgContent += `<rect x="${margin}" y="${y}" width="${svgWidth - 2*margin}" height="${rowHeight}" fill="#f5f7fa"/>`;
  
  // 表头文字
  headers.forEach((header, index) => {
    const x = margin + colWidths.slice(0, index).reduce((a, b) => a + b, 0) + 10; // 列起始X坐标
    svgContent += `
        <text x="${x}" y="${y + rowHeight/2 + 5}" font-size="14" fill="#333">${header}</text>
        <rect x="${margin + colWidths.slice(0, index).reduce((a, b) => a + b, 0)}" y="${y}" width="${colWidths[index]}" height="${rowHeight}" stroke="#e4e7ed" stroke-width="1" fill="transparent"/>
        `;
  });
  y += rowHeight; // 下移到内容行

  // 4. 生成表格数据行
  tableData.value.forEach((row, rowIndex) => {
    // 行背景（隔行变色）
    const bgColor = rowIndex % 2 === 0 ? '#fff' : '#fafafa';
    svgContent += `<rect x="${margin}" y="${y}" width="${svgWidth - 2*margin}" height="${rowHeight}" fill="${bgColor}"/>`;
    
    // 行数据
    const rowData = [
      row.orderNo || '',
      row.userId || '',
      row.phone || '',
      row.idNumber || '',
      row.amount || '',
       (row.paidAt || '').replace('T', ' '), 
      row.activityName || '',
      row.status || ''
    ];
    
    rowData.forEach((text, index) => {
      const x = margin + colWidths.slice(0, index).reduce((a, b) => a + b, 0) + 10;
      svgContent += `
        <text x="${x}" y="${y + rowHeight/2 + 5}" font-size="14" fill="#606266">${text}</text>
        <rect x="${margin + colWidths.slice(0, index).reduce((a, b) => a + b, 0)}" y="${y}" width="${colWidths[index]}" height="${rowHeight}" stroke="#e4e7ed" stroke-width="1" fill="transparent"/>
        `;
    });
    y += rowHeight;
    
    // 防止内容超出SVG高度
    if (y > svgHeight - margin) {
      console.warn('数据过多，部分内容未显示');
      return;
    }
  });

  // 关闭SVG标签
  svgContent += `</svg>`;

  // 5. 触发下载
  const blob = new Blob([svgContent], { type: 'image/svg+xml' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = '订单数据.svg'; // 文件名
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url); // 释放URL对象
}
</script>



<!--样式设置-->
<style lang="less" scoped>
/*头部部分*/
.el-header{
    height: 40px;
    border-bottom: 1px solid rgb(187, 186, 186);
}
.breadcrumb{
    display: flex;
    align-items: center;
}
.user-info{
    display: flex;
    align-items: center;
}
.white{
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/*内容部分*/
.el-main{
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.search{
    width: 100%;
    height: 50px;
    border: none;
    display: flex;
    align-items: center;
}
.searchInp{
    margin-left: 30px;
}
.searchBtn{
    margin-left: 30px;
}
/*导出/刷新部分*/
.export-refresh{
    width: 100%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: right;
    gap: 15px;
}
/*数据表格部分*/
::v-deep .el-table--fit{
    width: 97% !important;
}
::v-deep .el-table .el-table__header {
  width: 100% !important;
}
::v-deep .el-table .el-table__body {
  width: 100% !important;
}
::v-deep .el-table .el-table__row {
  height: 40px;
}
.demo-pagination-block{
    width: 97%;
    display: flex;
    justify-content: right;
    padding: 20px 0;
}
</style>